/* Some stylesheet reset */
.nav, .nav ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 
 * Droid Arabic Kufi (Arabic) http://www.google.com/webfonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}


/* General layout styling */
.nav {
	height: 160;
	direction:rtl;
	float:right;
	margin: 10px;
	display: inline-block;
}


.nav>li {
	display: block;
	float: right;
}

	/* The divs containing the links and the submenus */
	.nav>li>div {

		/* Layout */
		position: relative;
		width: 120px;
		height: 160px;
		margin-left: 5px;
		overflow: hidden;
		cursor: pointer;

		/* Text, background & effects */
		text-align: center;
		background: #00afdd;
		box-shadow: 0px 1px 2px rgba(30, 30, 30, .3);
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
		-ms-transition: all .3s;
	}

	/* The hover state of the divs containing the links & submenus */
	.nav div:hover {
		/* Increasing the size of the div */
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		/* Changing the background */
		background: #fff;
		z-index: 5;
	}

	/* The main links of the navigation */
	.nav>li>div>a {
		/* Layout */
		top: 0px;
		position: relative;
		display: block;
		height: 100px;
		padding-top: 65px;

		/* Text */
		font-family: 'Droid Arabic Kufi', sans-serif;
		text-decoration: none;
		font-size: 20px;
		font-weight: normal;
		color: #fff;
		
		/* The transition effects */
		-webkit-transition: all .3s;
		-ms-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
	}

	/* Creating the blur effect */
	.nav:hover div>a {
		opacity: .3;
		text-shadow: 0px 0px 5px #fff,
					 0px 0px 5px #fff,
					 0px 0px 9px #fff; 
	}


	/* The hover state of the main links */
	.nav div>a:hover, .nav li:hover a {
		top: -4px;
		text-shadow: none;
		opacity: 1;
		font-size: 23px;
		color: #29cef1;
	}

	/* Moving the main link to make room for the submenu */
	.nav .nested a:hover, .nav .nested:hover a {
		top: -60px;
		height: 160px;
	}

	/* The submenu */
	.nav ul {
		position: absolute;
		top: -9999px;
		margin: auto;
		display: block;
		width: 120px;
		text-align: center;
		opacity: 0;
		-webkit-transition: .5s opacity ease-out;
		-ms-transition: .5s opacity ease-out;
		-moz-transition: .5s opacity ease-out;
		-o-transition: .5s opacity ease-out;
	}

	/* Displaying the submenu */
	.nav li div:hover ul {
		top: 35px;
		color: #fff;
		opacity: 1;
	}


	/* The submenu links */
	.nav div:hover ul li a {
		color: #00afdd;
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-decoration: none;
		-webkit-transition: color .3s ease-out;
		-ms-transition: color .3s ease-out;
		-moz-transition: color .3s ease-out;
		-o-transition: color .3s ease-out;
	}

	/* The color of the submenu links on hover */
	.nav div ul li a:hover {
		color: #000;
	}

	/* The blue-white links */
	/* The background of the main links */
	.nav>li>.blue-white {
		background: #00afdd;
	}

	/* The background of the main links on hover */
	.nav>li>.blue-white:hover {
		background: white;
	}

	/* The text color of the main links */
	.nav>li>.blue-white>a {
		color: #fff;
	}

	/* The text color of the main links on hover */
	.nav>li>.blue-white:hover a {
		color: #00afdd;
	}

	/* The color of the submenu links on hover */
	.nav .blue-white ul li a:hover {
		color: black;
	}

	/* The brown-white links */
	.nav>li>.brown-white {
		background: #a33724;
	}

	.nav>li>.brown-white:hover {
		background: white;
	}

	.nav>li>.brown-white>a {
		color: #fff;
	}

	.nav>li>.brown-white:hover a {
		color: #a33724;
	}

	.nav .brown-white ul li a:hover {
		color: black;
	}

	/* The orange-white links */
	.nav>li>.orange-white {
		background: #eb8606;
	}

	.nav>li>.orange-white:hover {
		background: white;
	}

	.nav>li>.orange-white>a {
		color: #fff;
	}

	.nav>li>.orange-white:hover a {
		color: #eb8606;
	}

	.nav .orange-white ul li a:hover {
		color: black;
	}

	/* The yellow-white links */
	.nav>li>.yellow-white {
		background: #e9c405;
	}

	.nav>li>.yellow-white:hover {
		background: white;
	}

	.nav>li>.yellow-white>a {
		color: #fff;
	}

	.nav>li>.yellow-white:hover a {
		color: #e9c405;
	}

	.nav .yellow-white ul li a:hover {
		color: black;
	}

	/* The red-white links */
	.nav>li>.red-white {
		background: rgb(252, 93, 51);
	}

	.nav>li>.red-white:hover {
		background: white;
	}

	.nav>li>.red-white>a {
		color: #fff;
	}

	.nav>li>.red-white:hover a {
		color: #dc3306;
	}

	.nav .red-white ul li a:hover {
		color: black;
	}

	/* The green-white links */
	.nav>li>.green-white {
		background: #58ad0b;
	}

	.nav>li>.green-white:hover {
		background: white;
	}

	.nav>li>.green-white>a {
		color: #fff;
	}

	.nav>li>.green-white:hover a {
		color: #58ad0b;
	}

	.nav .green-white ul li a:hover {
		color: black;
	}

	/* The pink-white links */
	.nav>li>.pink-white {
		background: #cf2f4c;
	}

	.nav>li>.pink-white:hover {
		background: white;
	}

	.nav>li>.pink-white>a {
		color: #fff;
	}

	.nav>li>.pink-white:hover a {
		color: #cf2f4c;
	}

	.nav .pink-white ul li a:hover {
		color: black;
	}

	/* The turqoise-white links */
	.nav>li>.turqoise-white {
		background: #59b5a6;
	}

	.nav>li>.turqoise-white:hover {
		background: white;
	}

	.nav>li>.turqoise-white>a {
		color: #fff;
	}

	.nav>li>.turqoise-white:hover a {
		color: #59b5a6;
	}

	.nav .turqoise-white ul li a:hover {
		color: black;
	}

	/* The ye-white links */
	.nav>li>.ye-white {
		background: #e9c405;
	}

	.nav>li>.ye-white:hover {
		background: white;
	}

	.nav>li>.ye-white>a {
		color: #fff;
	}

	.nav>li>.ye-white:hover a {
		color: #e9c405;
	}

	.nav .ye-white ul li a:hover {
		color: #1cbae8;
	}




